<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/user/foo">Go to Foo</router-link>
    <router-link to="/user/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>
<script>
/*
const User = {
	template: '<div>User {{ $route.params.id }}</div>',
	watch: {
	beforeRouteUpdate (to, from) {
			console.log(to)
		}
	}
}
*/

const User = {
	template: '<div>User {{ $route.params.id }}</div>',
	beforeRouteUpdate (to, from, next) {
		//console.log(to)
		//console.log(from)
		//console.log(next)
		//next(false);
		next()
	}
}

const  myRoutes = [
    { path: '/user/:id', component: User }
  ];
  
const router = new VueRouter({
	routes:myRoutes
})

const app = new Vue({
  router
}).$mount('#app')

</script>